<!-- components/ContentList.vue -->
<template>
    <div class="content-list">
        <div v-for="(item, index) in items" :key="index" class="list-item">
            <div class="head-img">
                <img :src="fileBase + item.image" alt="">
            </div>
            <NuxtLink :to="getDetailPath(item)" class="item-main">
                <div>
                    <h3>{{ item.title }}</h3>
                    <div class="achievements">{{ item.description }}</div>
                    <div class="label"
                                    v-for="tag in item.tags" :key="item.id"
                                    :style="{
                                        border: `1px solid ${tag.color}`,
                                        color: tag.color
                                    }"
                                    >
                                    {{ tag.name }}</div>
                    <div class="date">{{ item.date }}</div>
                </div>
            </NuxtLink>
        </div>
    </div>
</template>

<script setup>
const localePath = useLocalePath()
const { fileBase } = useRuntimeConfig().public
const props = defineProps({
    items: {
        type: Array,
        required: true
    },
    type: {
        type: String,
        default: 'common'
    },
    prevtype: {
        type: String,
        default: 'academic'
    }
})

const getDetailPath = (item) => {
  // 党务专题特殊处理
  if(props.prevtype === 'academic') {
    return localePath(`/academic/${props.type}/${item.id}`)
  }
//   return `/articles/${item.id}`
}
</script>

<style lang="scss" scoped>
.content-list {
    --border-color: #F6F6F6;
    --text-color: #333333;
    --intro-color: #9E9E9E;
    --hover-color: #1867CA;

    .list-item {
        padding: .8rem 0;
        border-bottom: var(--border-color) 1px solid;
        width: 100%;
        cursor: pointer;
        display: flex;
        a {
            display: block;
            text-decoration: none;
        }
        .head-img {
            width: 12rem;
            height: 8rem;
            margin-right: 1rem;
            img {
                width: 100%;
                height: 100%;
                border-radius: .25rem;
                object-fit: cover;
            }
        }
        .item-main {
            width:calc(100% - 12rem - 1rem);
            position: relative;
            // margin: .8rem 0;
            h3 {
                color: var(--text-color);
                font-size: 1.1em;
                width: 86%;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .label {
                display: inline-block;
                padding: .2rem .5rem;
                border-radius: .25rem;
                font-size:.8rem;
            }
            .achievements{
                font-size: 1rem;
                width: 86%;
                color: var(--text-color);
                line-height: 1.4rem;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin:5px 0 10px
            }
            .date{
                text-align: right;
                color: #9E9E9E;
                font-size: 1rem;
                position: absolute;
                bottom: 0;
                right: 0;
            }
        }

        &:hover {
            .item-main {
                h3 {
                    color: var(--hover-color);
                }
            }
        }
    }

    @media (max-width: 480px) {
        .list-item {
            display: block; 
            .head-img {
                width: 100%;
                height: 14rem;
                margin-right: 0;
            }
           .item-main {
             margin-top: .8rem;
             width:100%;
             h3 {
                 width: 100%;
                 font-size: .95rem;
             }
             .achievements{
                 width: 100%;
                 font-size:.85rem;
                 line-height: 1.2rem;
                 -webkit-line-clamp: 3;
             }
           }
        }
    }
}
</style>